<html lang="zh-CN"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <base th:href="${#request.getContextPath()}+'/'">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="pragma" content="no-cache">
    <meta name="Cache-Control" content="no-cache, must-revalidate">
    <meta name="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <title>订单信息</title>
    <link rel="stylesheet" type="text/css" href="../static/buy.css">
    <link rel="stylesheet" type="text/css" href="../static/tempAlert.css">
    <link rel="shortcut icon" href="http://javen666.com:8080/fxmall/wxb/images/favicon.ico">
    <link rel="icon" type="image/gif" href="http://javen666.com:8080/fxmall/wxb/images/favicon.gif">
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
        #l-map{height:300px;width:100%;}
        #r-result{width:100%;}
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=xWCTBHyDEWEYu7RHFa2Vazw4hu4Qo2BC"></script>
</head>
<body>
<div class="container" style="padding: 50px 150px">

    <form id="form_buy" name="form_buy" class="buy-form"  action=""th:each=" good : ${good}">
        <input type="hidden" id="token" name="token" value="bpHjQ0Aqetmrh4+sVimKIQ==">
        <input type="hidden" name="attr_id" id="attr_id" value="">
        <input type="hidden" name="goodsId" id="goodsId" th:value="${good.goodId}">

        <section class="item_sec">
            <div class="item_wrap rel" >
                <div class="img_wrap"><img src="../static/pb1n3rya_1.jpg" height="70" th:src="${good.goodPic}"></div>
                <p class="item_tle" th:text="${good.goodName}">c-03</p>
                <p class="item_pay">货到付款并包邮</p>

                <ul class="sku_ul"></ul>

                <p>已有：<font style="color:red;text-align:center" th:text="${good.sellNum}"> 26 </font>人购买</p>

                <p class="row">
                    <label>价　格 </label>
                    <span class="i_pri" id="item_price" th:text="${good.skuString}">
                        <input type="hidden" id="skuId" />
                    </span>
                </p>

                <!--<input required="required" id="item_num" name="number" maxlength="3" class="block input" type="hidden"-->
                       <!--value="1">-->
                 <p class="row">
                    <label>数　量 </label>
                    <input required="required" id="goods_num" name="goods_num" maxlength="3" class="block input" style="width:40px;text-align:center" type="tel" value="1">
                </p>
                <p>
                    <input type="radio" id="pay_type1" name="pay_type"  value="1"
                           checked="checked">货到付款并包邮(支持开箱验货)
                    <input type="radio" id="pay_type2" name="pay_type"  value="2" checked="checked"> 微信支付
                </p>
            </div>
        </section>
        <section class="item_sec">
            <div class="item_wrap add">
                <p class="row">
                    <label for="buyerName">收货人</label>
                    <input required="required" id="buyerName" name="buyerName" class="block input" type="text" value=""
                           placeholder="请输入您的姓名或称呼">
                </p>
                <p class="row">
                    <label for="buyerPhone">联系手机</label>
                    <input required="required" id="buyerPhone" name="buyerPhone" maxlength="11" class="block input" type="tel"
                           value="" placeholder="请输入您的手机号码">
                </p>
                <p class="row">
                    <label for="province">选择地区</label>
                    <select class="select" id="province" name="province">
                        <option value="">省 必选</option>
                    </select>
                    <select class="select" id="city" name="city" >
                        <option value="">市 必选</option>
                    </select>
                    <select class="select" id="area" name="area" onchange="changeArea()">
                        <option value="">区 必选</option>
                    </select>
                </p>
                <p class="row row_area">
                    <div id="l-map"></div>
                </p>
                <p class="row row_area">
                    <label for="address">详细地址</label>
                    <input required="required" id="address" name="address" class="block input"
                           placeholder="请填写详细地址，方便快递人员送货上门"
                           type="text" value="">
                <div id="searchResultPanel"
                     style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                </p>
                <p class="row row_area">
                    <label for="buyerRemark">您的留言</label>
                    <input id="buyerRemark" name="buyerRemark" class="block input" type="text" value=""
                           placeholder="可以告诉卖家您对商品的特殊要求，如：颜色、数量等">
                </p>
            </div>
        </section>
        <footer>
            <button type="button" class="c_txt orange_bg" id="buy_now" onclick="submitOrder()">提交订单</button>
        </footer>

        <div style="height:100px;">&nbsp;
            注：提交订单后我们会有专门的客服与您联系，请保持手机畅通。
        </div>

    </form>
</div>

<script type="text/javascript" src="../static/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="../static/address.js"></script>
<script type="text/javascript" src="../static/tempAlert.js"></script>

<script type="text/javascript">

    function submitOrder() {
        var obj= {};
        obj['goodId'] = $("#goodsId").val();
        obj['skuId'] = $("#skuId").val();
        obj['buyNum'] =$("#goods_num").val();
        obj['payType'] =$("#payType1").checked?1:2;

        obj['buyerName'] =$("#buyerName").val();
        obj['buyerPhone'] =$("#buyerPhone").val();
        obj['province'] =$("#province").val();
        obj['city'] =$("#city").val();
        obj['area'] =$("#area").val();
        obj['address'] =$("#address").val();
        obj['buyerRemark'] =$("#buyerRemark").val();

        $.ajax({
            url: "order/add",
            type: "POST",
            data: JSON.stringify(obj),
            contentType: "application/json",
            success:function (data) {
                if (data.success) {
                    window.location.href="pay.html";
                }
            }

        });
    };

    function changeArea() {
        var area = $("#area").val();
        map.centerAndZoom(area,12);
    }

    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

    var map = new BMap.Map("l-map");
    map.centerAndZoom("北京",12);                   // 初始化地图,设置城市和地图级别。

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "address"
            ,"location" : map
        });

    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        setPlace();
    });

    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }

    // var buyTimes = '0';
    // var check_code = '';
    // if (buyTimes > 5) {
    //     $('#captchaWrap').show();
    // }
    // try {
    //     window.addEventListener('load', function () {
    //         FastClick.attach(document.body);
    //     }, false);
    // } catch (e) {
    // }
    // var Item = {
    //     getItemInfo: function () {
    //     },
    //     changeCount: function () {
    //         $("#item_num").bind("focusout", function () {
    //             var _this = $(this);
    //             var val = _this.val();
    //             if (!val) {
    //                 M._alert("数量不可为空");
    //                 _this.val(1);
    //                 return;
    //             }
    //             if (isNaN(val)) {
    //                 M._alert("数量必须为数字");
    //                 _this.val(1);
    //                 return;
    //             }
    //             if (Number(val) < 1) {
    //                 M._alert("客官至少买一件嘛");
    //                 _this.val(1);
    //                 return;
    //             }
    //
    //             var _v = val;
    //             var noInt = false;
    //             if (_v.toString().indexOf(".") != -1) {//有小数点 则先转化一下
    //                 noInt = true;
    //                 _v = Math.floor(val);//优化后的整数
    //             }
    //             noInt && M._alert("数量必须为整数");
    //             _this.val(_v);
    //
    //             if ($(".sku_cur").length === 0) {
    //                 M._alert("请选择商品类型");
    //                 return;
    //             }
    //             var countPrice = $(".sku_cur").attr("data-price") * _v;
    //             countPrice = Number(countPrice).toFixed(2);
    //
    //
    //         })
    //     },
    //     init: function () {
    //         Item.changeCount();
    //         Item.getItemInfo();
    //         $("#buy_now").bind("click", function () {
    //             var isRight = true;
    //             var skuId = $("#item_sku_id").val();//商品ID
    //             var name = $("#name").val();//收货人
    //             var tel = $("#tel").val();//联系手机
    //             var province = $("#province").val();//省
    //             var city = $("#city").val();//市
    //             var area = $("#area").val();//区
    //             var address = $("#address").val();//区
    //             var rule = /^1[3-8][0-9]\d{4,8}$/;
    //             var mbcaptcha = $('[name="mbcaptcha"]');
    //             var captcha = $('[name="captcha"]');
    //             var captcha_val = captcha.val();
    //             var mbcaptcha_val = mbcaptcha.val();
    //
    //             if (skuId == '') {
    //
    //                 showWin.alertWin("请选择商品类型", "success");
    //                 isRight = false;
    //             } else if (name == '') {
    //
    //                 showWin.alertWin("请填写收货人", "success");
    //                 isRight = false;
    //             } else if (tel == '') {
    //
    //                 showWin.alertWin("请填写联系手机", "success");
    //                 isRight = false;
    //             } else if (province == '' || city == '' || area == '') {
    //
    //                 showWin.alertWin("请选择地区", "success");
    //                 isRight = false;
    //             } else if (address == '') {
    //
    //                 showWin.alertWin("请填写详细地址", "success");
    //                 isRight = false;
    //             } else if (tel.length != 11 || rule.test(tel) == false) {
    //
    //                 showWin.alertWin("联系手机格式不对", "success");
    //                 isRight = false;
    //             } else if (mbcaptcha.is(':visible') && mbcaptcha_val.length < 1) {
    //
    //                 showWin.alertWin("请输入手机验证码", "success");
    //                 mbcaptcha.focus();
    //                 isRight = false;
    //             } else if (captcha.is(':visible') && captcha_val.length < 1) {
    //
    //                 showWin.alertWin("请输入验证码", "success");
    //                 captcha.focus();
    //                 isRight = false;
    //             }
    //
    //
    //             if (isRight) {
    //                 if (check_code == 1) {//开启验证
    //                     //验证手机验证码
    //                     if (checkMobileCode() == 0) {
    //                         M._alert('手机验证码不正确!');
    //                         mbcaptcha.focus();
    //                         return false;
    //                     }
    //                 }
    //                 $(this).unbind('click');
    //                 document.getElementById("form_buy").submit();
    //             }
    //         });
    //
    //         $(".js-refresh-check").click(function (event) {
    //             refreshCheck();
    //         });
    //     }
    // }
    // Item.init();
    //
    // //获取校验码
    // function refreshCheck() {
    //     var url = '/fxmall/index/captcha';
    //     $('.check-code').attr('src', url + '?t=' + new Date().getTime());
    //     $('.captcha').val('').focus();
    // }
    //
    // //获取手机验证码
    // function getMobileCode() {
    //     var mobile = $("#tel").val();
    //     if (mobile == '') {
    //         M._alert("请填写手机号码");
    //         return false;
    //     }
    //     var action = '/fxmall/mobile/vcode';
    //     $.ajax({
    //         url: action,
    //         type: 'post',
    //         data: "mobile=" + mobile,
    //         dataType: 'text',
    //         success: function (response) {
    //             var suc = response.split("#")[0];
    //             var msg = response.split("#")[1];
    //             if (suc == '1') {
    //                 M._alert(msg);
    //                 countDown(60);
    //             } else {
    //                 M._alert(msg);
    //             }
    //         },
    //         error: function () {
    //             M._alert("获取验证码失败!");
    //         }
    //     });
    // }
    // //验证手机验证码
    // function checkMobileCode() {
    //     var vcode = $("#mbcaptcha").val();
    //     if (vcode == '') {
    //         alert("请填写手机手机验证码!");
    //         return false;
    //     }
    //     var action = '/fxmall/mobile/check';
    //     var param = "vcode=" + vcode;
    //     return commonLoad(action, param, "post");
    // }
    // function countDown(secs) {
    //     $('[name="ckbtn"]').val(secs + "秒后重新获取")
    //     $("#ckbtn").attr("disabled", true);
    //     if (--secs > 0) {
    //         setTimeout("countDown(" + secs + ")", 1000);
    //     } else {
    //         $("#ckbtn").removeAttr("disabled");
    //     }
    // }
    // function commonLoad(url, param, method) {
    //     var obj;
    //     var value;
    //     if (window.ActiveXObject) {
    //         obj = new ActiveXObject('Microsoft.XMLHTTP');
    //     } else if (window.XMLHttpRequest) {
    //         obj = new XMLHttpRequest();
    //     }
    //     obj.open(method, url, false);
    //     obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //     obj.send(param);
    //     var result = obj.responseText
    //     return result;
    // }
    // function clearrvl() {
    //     document.form_buy.reset();
    // }
    // function dosubmit() {
    //     //获取表单提交按钮
    //     var btnSubmit = document.getElementById("buy_now");
    //     //将表单提交按钮设置为不可用，这样就可以避免用户再次点击提交按钮
    //     btnSubmit.disabled = "disabled";
    //     //返回true让表单可以正常提交
    //     return true;
    // }
    // function changeAtt(t) {
    //     t.lastChild.checked = 'checked';
    //     for (var i = 0; i < t.parentNode.childNodes.length; i++) {
    //         if (t.parentNode.childNodes[i].className == 'cattsel') {
    //             t.parentNode.childNodes[i].className = '';
    //         }
    //     }
    //     t.className = "cattsel";
    //     changePrice();
    // }
    //
    // /**
    //  * 点选可选属性或改变数量时修改商品价格的函数
    //  */
    // function changePrice() {
    //
    //     var attr = getSelectedAttributes(document.forms['form_buy']);
    //     var attr_id = '';
    //
    //     for (var i = 0; i < attr.length; i++) {
    //         attr_id += attr[i] + ',';
    //     }
    //     attr_id = attr_id.substring(0, attr_id.length - 1);
    //     //alert(attr_id);
    //     var pay_type = $('input[name="pay_type"]:checked').val();
    //     ;
    //     //alert(pay_type);
    //
    //     $.ajax({
    //         url: "http://115.29.207.161:8080//getGoodPrice",// 跳转到 action
    //         data: {
    //             "goods_id": 'pb1n3rya',
    //             "attr_id": attr_id,
    //             "pay_type": pay_type
    //         },
    //         type: 'post',
    //         cache: false,
    //         dataType: "text",
    //         success: function (result) {
    //             $data = eval("(" + result + ")");
    //             // alert($data.jg);
    //             $("#item_price").html("￥" + $data.jg);
    //             $("#attr_id").val($data.attr_id);
    //         },
    //         error: function () {
    //
    //             // alert("异常！");
    //         }
    //     });
    //
    // }
    //
    // function getSelectedAttributes(formBuy) {
    //     var spec_arr = new Array();
    //     var j = 0;
    //
    //     for (i = 0; i < formBuy.elements.length; i++) {
    //         var prefix = formBuy.elements[i].name.substr(0, 5);
    //
    //         if (prefix == 'spec_' && (
    //             ((formBuy.elements[i].type == 'radio' || formBuy.elements[i].type == 'checkbox') && formBuy.elements[i].checked) ||
    //             formBuy.elements[i].tagName == 'SELECT')) {
    //             spec_arr[j] = formBuy.elements[i].value;
    //             j++;
    //         }
    //     }
    //
    //     return spec_arr;
    // }
    //
    // changePrice();
    // var jishi = 0;
    //
    // function setjishi() {
    //     jishi = jishi + 1;
    //
    //     $("#miaoshu").val(jishi);
    // }
    // setInterval('setjishi()', 1000);
</script>
<style>
    .zzsc {
        width: 50px;
        height: 45px;
        position: fixed;
        right: 0;
        top: 60%;
        margin-top: -125px;
        z-index: 900;
    }

    .zzsc a {
        width: 50px;
        height: 45px;
        float: left;
        display: block;
        margin-bottom: 8px;
    }
</style>
<div class="zzsc">
</div>
</body>
</html>